<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现⼀个求班级同学平均分，及格数等的⼀个练习</title>
    <style>
        .modify {
            width: 300px;
            height: 150px;
            background-color: gray;
        }
    </style>
</head>

<body>
    <div class="box">
        <input name="name" type="text" placeholder="请输入学生姓名" v-model="name">
        <input name="score" type="text" placeholder="请输入学生分数" v-model="score">
        <button @click="add">添加</button>
        <div>
            <input type="text" v-model.trim="search_name">
            <button @click="search">搜索</button>
        </div>
        <div>
            <button @click="pass">及格人员</button>
            <button @click="not_pass">不及格人员</button>
            <button @click="all">全部人员</button>
        </div>
        <table border="1">
            <thead>
                <tr>
                    <th>名称</th>
                    <th>
                        分数
                        <button @click="ascending_order">升序</button>
                        <button @click="descending_order">降序</button>
                    </th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in Rendering" :key="item.id">
                    <td>{{item.name}}</td>
                    <td>{{item.score}}</td>
                    <td>
                        <button @click="del(item.id)">删除</button>
                        <button @click="edit(item.id)">编辑</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <p>平均分：{{count_average}}</p>
        <div class="modify" v-show="modify_show==1">
            <div>修改成绩</div>
            <p>学生名称：<span>{{modify_name}}</span></p>
            <p>学生成绩：<input type="text" v-model="modify_score"></p>
            <button @click="sure_edit()">确定修改</button>
        </div>
    </div>
    <script src="../vue.min.js"></script>
    <script>
        new Vue({
            el: '.box',
            data: {
                arr: [{
                    id: 1,
                    name: '李四',
                    score: 92
                }, {
                    id: 2,
                    name: '王五',
                    score: 75
                }, {
                    id: 3,
                    name: '赵六',
                    score: 88
                }, {
                    id: 4,
                    name: '钱七',
                    score: 63
                }, {
                    id: 5,
                    name: '孙八',
                    score: 95
                }, {
                    id: 6,
                    name: '周九',
                    score: 70
                }, {
                    id: 7,
                    name: '吴十',
                    score: 82
                }, {
                    id: 8,
                    name: '郑十一',
                    score: 59
                }, {
                    id: 9,
                    name: '王十二',
                    score: 91
                }, {
                    id: 10,
                    name: '刘十三',
                    score: 77
                }],
                arr_state: 'all',
                name: '',
                score: '',
                modify_show: 0,
                modify_id: '',
                modify_name: '',
                modify_score: '',
                search_name: ''
            },
            methods: {
                //添加学生
                add() {
                    if (this.name && this.score) {
                        this.arr.push({
                            id: this.arr[this.arr.length - 1].id,
                            name: this.name,
                            score: Number(this.score)
                        })
                        this.name = ''
                        this.score = ''
                    }
                },
                //删除学生
                del(id) {
                    this.arr = this.arr.filter(item => item.id !== id)
                },
                //编辑成绩
                edit(id) {
                    this.modify_show = 1
                    this.modify_id = id
                    this.modify_name = this.arr.find(item => item.id == id).name
                    this.modify_score = this.arr.find(item => item.id == id).score
                },
                //确定编辑
                sure_edit() {
                    this.arr.find(item => item.id == this.modify_id).score = Number(this.modify_score)
                    this.modify_show = 0
                },
                // 升序排序
                ascending_order() {
                    this.arr.sort((a, b) => a.score - b.score)
                },
                // 降序排序
                descending_order() {
                    this.arr.sort((a, b) => b.score - a.score)
                },
                // 搜索
                search() {
                    this.arr_copy = this.arr
                    this.arr = this.arr.filter(item => item.name == this.search_name)
                },
                // 及格人员
                pass() {
                    this.arr_state = 'pass'
                },
                // 不及格人员
                not_pass() {
                    this.arr_state = 'not_pass'
                },
                // 全部人员
                all() {
                    this.arr_state = 'all'
                }
            },
            computed: {
                Rendering() {
                    if (this.arr_state == 'all') {
                        return this.arr
                    } else if (this.arr_state == 'pass') {
                        return this.arr.filter(item => item.score >= 60)
                    } else if (this.arr_state == 'not_pass') {
                        return this.arr.filter(item => item.score < 60)
                    }
                },

                // 计算平均分
                count_average() {
                    let sum = 0
                    this.arr.forEach(item => {
                        sum += item.score
                    });
                    sum = sum / this.arr.length
                        // 结果不保留小数
                    return sum.toFixed(0)
                }
            }
        })
    </script>
</body>

</html>